<template>
  <div class="projectFormation" :style="imgStyle1">
    <header>
      <ul>
        <li>
          <btn-row>
            <el-button type="primary" @click="btnback">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fanhui"></use></svg
              >返回</el-button
            >
          </btn-row>
        </li>
        <li>ID:{{ JSON.parse(this.$route.query.Projects).id }}</li>
        <li>
          <span>{{
            JSON.parse(this.$route.query.Projects).customspassName
          }}</span>
        </li>
        <li class="user">欢迎您 {{ userformation[0].username }}</li>
      </ul>
    </header>
    <div class="se">
      <div class="projectinterduce">
        <div>关卡描述:</div>
        <ul v-if="Formation[0]">
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shengdanwawa"></use>
            </svg>
            任务要求:
            <p>{{ Formation[0].introduce }}</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shengdanwawa"></use>
            </svg>
            时间要求:
            <p>{{ Formation[0].time }}天</p>
          </li>
          <li v-if="Formation[0].fileurl">
            <svg class="icon" aria-hidden="true"> 
              <use xlink:href="#icon-shengdanwawa"></use>
            </svg>
            图片展示:
            <div class="demo-image__preview" style="margin-top:10px">
              <el-image
                :src="imgurl"
                :preview-src-list="imgbig"
              ></el-image>
            </div>
          </li>
        </ul>
      </div>
      <div class="projectcontenx" v-if="projectFormation[0]">
        <div>关卡状态:</div>
        <div class="longtime"></div>
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuangtai"></use>
            </svg>
            状态:
            <span
              class="status"
              :style="{
                backgroundColor:
                  projectFormation[0].status == '3'
                    ? 'green'
                    : projectFormation[0].status == '2'
                    ? 'red'
                    : projectFormation[0].status == '0'
                    ? 'pink'
                    : projectFormation[0].status == '1'
                    ? 'gray'
                    : projectFormation[0].status == '4'
                    ? 'skyblue'
                    : projectFormation[0].status == '5'
                    ? 'green'
                    : '',
              }"
              v-text="projectstatus"
            ></span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-kaishishijian"></use>
            </svg>
            开始时间:<span>{{ projectFormation[0].start }}</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jieshushijian"></use>
            </svg>
            结束时间:<span>{{ projectFormation[0].end }}</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shijiwanchengshijian"></use>
            </svg>
            实际完成时间:<span>{{ projectFormation[0].actualFinishTime }}</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jieshushijian3"></use></svg
            >实际完成天数<span
              >{{ projectFormation[0].actualFinishDay }}天</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/projectFormation.css";
import { mapState } from "vuex";
export default {
  name: "projectFormation",
  data() {
    return {
       imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      projectFormation: [],
      Formation: [],
      status: null,
      projectstatus: "",
      value: "",
      actuallyday: "",
      //图片
      imgurl: "",
      imgbig: [],
    };
  },
  inject: ["reload"],
  computed: {
    ...mapState("LoginData", ["userformation"]),
  },
  methods: {
    //返回按钮
    btnback() {
      this.$router.push({
        name: "Subject",
        value: "",
      });
    },
  },
  watch: {
    status: {
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue == "3") {
          this.projectstatus = "进行中";
        } else if (newValue == "1") {
          this.projectstatus = "未开始";
        } else if (newValue == "0") {
          this.projectstatus = "已完成";
        } else if (newValue == "2") {
          this.projectstatus = "逾期";
        } else if (newValue == "-1") {
          this.projectstatus = "已关闭";
        } else if (newValue == "4") {
          this.projectstatus = "等待验收";
        } else if (newValue == "5") {
          this.projectstatus = "正在验收";
        }
      },
    },
  },
  mounted() {
    //前端查看关卡的学习情况
    let data = JSON.parse(localStorage.getItem("datas"));
    this.projectFormation.push(JSON.parse(this.$route.query.Projects));
    this.status = this.projectFormation[0].status;
    this.actuallyday = this.$route.query.actuallyday;
    let obj = { customspassId: this.projectFormation[0].customspassId };
    this.value = data[1];
    let url =
      "customspass/selectCustomspassByCustomspassId";
    this.LookAxios(url, obj);
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  box-sizing: border-box;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.22em;
  fill: currentColor;
  overflow: hidden;
  font-size: 1.4em;
  margin-right: 0.4em;
}
.projectFormation {
  
  .el-button--primary {
    border: none;
    padding: 5px 15px;
  }
}
</style>